/* Header */
.page2{
	margin-top: -40px;
}
		.page2 ul{
			/* background: rgb(254,0,54); */
			background-image: url('/img/page2.png');
			height: 300px;	
		}
		.page2 ul a{
			color: white;
			font-weight: bold;
		}
		#li1{
			margin-top: 100px;
			margin-right: 10px;
			margin-left: 150px;
			width: 350px;
		}
		#li2{
			margin-left: 155px;
			margin-top: 100px;
		}
		#li2 p{
			margin-left: 13px;
		}
		#li2 .counter{
			font-size: 50px;
		}
		#li3{
			margin-left: 155px;
			margin-top: 100px;
		}
		#li3 .counter{
			font-size: 50px;
		}
		.page2 ul li{
			color: white;
			box-sizing: border-box;
			height: 300px;
			width: 200px;
			float: left;
			margin-right: 0px;
		}
		.page2 ul li:last-child{
			margin-right: 0px;
		}
		.page2 p{
			letter-spacing:2px;
			line-height: 30px;
		}
		.page2 ul li span{
			display: block;
			font-size: 14px;
			text-align: center;
			font-weight: bold;
		}
		.page3{
			margin-top: 0px;
			width: 1080px;
		}
		.page3 li{
			/* border: 2px dashed white; */
			/* box-shadow: 5px 7px 10px rgb(211, 205, 199); */
			box-shadow: 0px 0px 7px #fff,0px 0px 7px red;
			box-shadow: 0px 0px 7px #fff,0px 0px 7px rgb(211, 205, 199);
			background-color: white;
			color: red;
			box-sizing: border-box;
			height: 230px;
			float: left;
			margin-right: 0px;
		}
		.page3 li:hover{
			box-shadow: 0px 0px 7px #fff,0px 0px 7px red;
  		}

		.page3 #li1{
			margin-left: -200px;
			width: 350px;
			margin-right: 50px;
		}
		.page3 #li2{
			margin-left: 0px;
			width: 350px;
			margin-right: 50px;
		}
		.page3 #li3{
			margin-left: 0px;
			width: 350px;
		}
		.avatar_box{
			height: 130px;
			width: 130px;
			
		}
		#page4{
			background-image: url('/img/cooperate.jpeg');
			background-repeat: no-repeat;
			width: 100%;
			margin-top: 700px;
			margin-left: 0px;
			height: 700px;
			/* opacity: 0.8;  */
		}
		#welcome{
			position: absolute;
			margin-top: 70px;
			left: 678px;
			font-size: 40px;
			color: white;
			font-weight: bold;
		}
		#page4-1{
			position: absolute;
			margin-top: 200px;
			left: 500px;
			background-color: #316EE8;
			color: rgb(50, 50, 62);
			width: 510px;
			height: 50px;
		}
		#page4-1 p{
			margin-top: 7px;
			text-align: center;
			font-size: 30px;
			color: white;
		}
		#page4-2{
			position: absolute;
			margin-top: 250px;
			left: 500px;
			background-color: white;
			color: white;
			width: 510px;
			height: 300px;
		}
		#page4-2 p{
			position: absolute;
			left: 30px;
			right: 30px;
			margin-top: 50px;
			font-size: 18px;
			color: #31CFE8;
			letter-spacing:2px;
			line-height: 30px;
		}
		
		#page4 a{
  position: absolute; /*绝对对位*/
  margin-top: 500px;
  margin-left: 755px;
  transform: translate(-50%,-50%); /*移动，根据X,Y轴*/
  width: 190px; /*宽*/
  height: 40px; /*高*/
  text-align: center; /*字体水平居中*/
  font-size: 20px; /*字体大小*/
  line-height: 40px; /*行高*/
  color: #fff;
  text-transform: uppercase; /*字体大写*/
  text-decoration: none; /*字体增加装饰：去除下划线*/
  font-family: sans-serif; /*非衬线体*/
  box-sizing: border-box; /*盒模型大小规则*/
  background: linear-gradient(
    90deg,

#65FDF0, #32CCBC, #ffeb3b, 
  #03a9f4, #f441a5, #ffeb3b, #03a9f4); /*渐变背景*/
  border-radius: 60px; /*边框圆角*/
  background-size: 400%; /*背景大小*/
  z-index: 1; /*层叠定位*/
}
a:hover{
  animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
}
@keyframes animate{
  0%{
    background-position: 0%; /*修改背景定位，实现渐变色炫光*/
  }
  50%{
    background-position: 100%;
  }
  100%{
    background-position: 0%;
  }
}
a::before{ /*之前添加*/
  content: ''; /*内容*/
  position: absolute; /*绝对定位*/
  top:-5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  left: -5px;
  right: -5px;
  bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  z-index: -1; 
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
  #f441a5, #ffeb3b, #03a9f4);
  border-radius: 40px;
  background-size: 400%;
  filter: blur(20px); /*过渡：模糊*/
  opacity: 0; /*透明度*/
  transition: 1s; /*过渡时间*/
}
a:hover::before{
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite; /*注意动画名称统一*/
}
		.p1{
			margin-top: -60px;
			color: black;
			font-size: 20px;
		}
		.p2{
			margin-top: 25px;
			color: rgb(102,102,127);
		}
		#img1{
			position:absolute;
			left: 23.5%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		#img2{
			position:absolute;
			left: 50.0%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		#img3{
			position:absolute;
			left: 76.0%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		#img4{
			position:absolute;
			left: 23.5%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		#img5{
			position:absolute;
			left: 50.0%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		#img6{
			position:absolute;
			left: 76.0%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			height: 90px;
			width: 90px;
		}
		
.large-header {
	width: 450px;
	height: 260px;
	position: relative;
	width: 100%;
	height: 700px;
	background: #333;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.demo-1 .large-header {
	background-image: url('/img/bk.png');
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title
{
	text-transform: uppercase;
	font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

span{
	display: inline-block;
	animation: .8s jump ease-in-out;
	animation-delay: 3s;
	animation-duration:4s;
	animation-direction:alternate;
	animation-iteration-count:30;
	-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}
@keyframes jump {
	0%,100%{
		transform: scale(1.15);
	}
	50%{
		transform: scale(1.22);
	}
	
}

.main-title .thin {
	font-weight: 400;
	color: rgb(254,0,54);
}

@media only screen and (max-width : 768px) {
	.demo-1{
		font-size: 3em;
	}
}
.codrops-header h1{
	font-size: 35px;
	font-weight: bold;
	margin-top: 0px;
}